<template>
	<yingbing-audio
	ref="audio"
	:autoplay="autoplay"
	:src="srcSync"
	:poster="poster"
	:title="title"
	:lyric="lyrics"
	:lyricConfig="lyricConfig"
	@lyricChange="lyricChange"
	@ended="handleEnded"
	@canplay="handleCanplay"
	@play="handlePlay"
	@pause="handlePause"
	@error="handleError"
	@timeupdate="handleTimeUpdate"
	></yingbing-audio>
</template>
<script>
	import SkinColor from '@/assets/skin/index.js'
	import { downloadNetResourceSaveLocal } from '@/assets/js/native.js'
	export default {
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			},
			lyricConfig () {
				return {
					mode: this.lyricShow ? 'overall' : 'hidden',
					fillColor: this.skinColor.color_theme_1,
					strokeColor: this.skinColor.color_1,
					offset: uni.getSystemInfoSync().windowBottom + uni.upx2px(20)
				}
			},
			autoplay () {
				return this.$store.getters['setting/GET_AUDIO_AUTOPLAY'] == 1
			},
			src () {
				return this.$store.getters['audio/GET_CURRENT_SRC']
			},
			referer () {
				return this.$store.getters['audio/GET_CURRENT_REFERER']
			},
			title () {
				return this.$store.getters['audio/GET_CURRENT_TITLE']
			},
			lyrics () {
				return this.$store.getters['audio/GET_LYRIC_LIST']
			},
			lyricShow () {
				return this.$store.getters['audio/GET_LYRIC_SHOW']
			}
		},
		data () {
			return {
				srcSync: '',//播放连接
				isCache: false//是否加载了缓存
			}
		},
		beforeCreate() {
			uni.$on('seekSong', time => {
				this.seek(time)
			})
			uni.$on('play', () => {
				this.play()
			})
			uni.$on('pause', () => {
				this.pause()
			})
		},
		beforeDestroy () {
			this.$store.dispatch('audio/stop')
			this.$store.dispatch('audio/clear')
			uni.$off('seekSong')
			uni.$off('play')
			uni.$off('pause')
		},
		methods: {
			lyricChange (e) {
				this.$store.commit('audio/SET_LYRIC_INDEX', e.index)
				this.$store.commit('audio/SET_LYRIC_TITLE', e.title)
			},
			handleCanplay (e) {
				this.$store.commit('audio/SET_DURATION', e.duration)
			},
			handleTimeUpdate (e) {
				this.$store.commit('audio/SET_CURRENT_TIME', e.currentTime)
			},
			handlePlay () {
				this.$store.commit('audio/SET_PAUSED', false)
			},
			handlePause () {
				this.$store.commit('audio/SET_PAUSED', true)
			},
			handleStop () {
				this.$store.dispatch('audio/stop')
			},
			handleEnded () {
				this.$store.dispatch('audio/next')
			},
			handleError () {
				//如果加载了缓存还报错，说明缓存文件已经失效了
				if ( this.isCache ) {
					this.setLocalPath(this.src)//重新下载
				} else {
					uni.showToast({
						title: '播放失败，2秒后继续播放',
						icon: 'none',
						duration: 2000
					})
					setTimeout(() => {
						this.$store.dispatch('audio/next')
					}, 2000)
				}
			},
			seek (time) {
				this.$refs.audio.seek(time)
			},
			play () {
				this.$refs.audio.play()
			},
			pause () {
				this.$refs.audio.pause()
			},
			stop () {
				this.$refs.audio.stop()
			},
			setLocalPath (src) {
				//查看是否有缓存
				const caches = this.$store.getters['cache/GET']
				const index = caches.findIndex(cache => cache.origin == src)
				if ( index > -1 ) {
					//有没有加载过缓存
					if ( !this.isCache ) {
						this.srcSync = caches[index].path
						this.isCache = true
						return
					} else {
						//加载过缓存，直接删除缓存记录
						this.$store.dispatch('cache/remove', src)
					}
				}
				//下载资源
				downloadNetResourceSaveLocal({
					src: src,
					referer: this.referer,
					complete: res => {
						this.isCache = false
						if ( res.errCode == 0 ) {
							this.srcSync = res.tempFilePath
							//将图片路径存入缓存
							this.$store.dispatch('cache/add', {
								origin: src,
								path: res.tempFilePath
							})
						} else {
							//下载失败，直接报错
							this.handleError()
						}
					}
				})
			}
		},
		watch: {
			src (newVal) {
				this.isCache = false
				//没有请求源直接播放
				if ( !this.referer ) {
					this.srcSync = newVal
				} else {
					//如果有请求源，去下载音频文件到本地播放
					this.srcSync = ''
					this.setLocalPath(newVal)
				}
			}
		}
	}
</script>

<style>

</style>
